<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            height: 100vh;
        }

        .box>img {
            position: absolute;
            z-index: 100;
            left: calc(50% - 25px);
            top: calc(100% - 62px);
        }

        .zidan {
            position: absolute;
            top: calc(100% - 62px);
            /*calc————>    用于动态计算长度值 */
            left: calc(50% - 25px);
            width: 10px;
            height: 40px;
            border-top: 1px solid #f00;
            background-image: linear-gradient(rgb(255, 47, 0), rgb(255, 221, 0), rgba(255, 0, 0, 0), rgba(255, 0, 0, 0));
            border-top-left-radius: 100%;
            border-top-right-radius: 100%;
            transition: top 0s linear;
        }
    </style>           
</head>

<body>
    <div class="box">
        <!-- <span class="zidan"></span> -->
        <img src="./bd.png" alt="">
    </div>
    <script>
        var img = document.querySelector("img");

        var box = document.querySelector(".box");
        // 1.按上下左右键实现img的移动
        // 1.1加鼠标事件
        document.addEventListener("mousemove", function (e) {
            img.style.left = e.clientX - 48 + "px";
            img.style.top = e.clientY - 40 + "px";
            var { x, y } = img.getBoundingClientRect();
            switch (e.keyCode) {
                case 37:
                    x -= 5;
                    break;
                case 38:
                    y -= 5;
                    break;
                case 39:
                    x += 5
                    break;
                case 40:
                    y += 5;
                    break;
                default:
                    break;

            }
            x = x < 0 ? 0 : x;
            y = y < 0 ? 0 : y;
            x = x > window.innerWidth - img.offsetWidth ? window.innerWidth - img.offsetWidth : x;
            y = y > window.innerHeight - img.offsetHeight ? window.innerHeight - img.offsetHeight : y;
            img.style.left = x + "px";
            img.style.top = y + "px";
        })

        window.addEventListener("keydown", function (e) {
            // 当按下空格
            if (e.keyCode == 32) {
                // 创建一个span标签
                var span = document.createElement("span");
                // 给这个span添加上这个class 会带有相关样式 
                span.classList.add("zidan");
                // 获取小飞机的位置
                var { x, y } = img.getBoundingClientRect();
                // 计算让x的值等于小飞机中间 x - 小飞机宽的一半 + span宽的一半 
                x += 20;
                // 设置span的初位置
                span.style.top = y + "px";
                span.style.left = x + "px";
                // 将标签添加至页面
                box.appendChild(span);
                // 在标签添加完成后 执行
                setTimeout(function () {
                    // 标签创建后设置span的过渡时间
                    span.style.transitionDuration = "1s";
                    // 设置span位置移动 带有动画效果
                    span.style.top = "-40px";
                    // 等过渡动画执行完毕后删除这个标签 
                    setTimeout(function () {
                        box.removeChild(span);
                    }, 1000)
                }, 0)
            }
        })


        // window.onkeydown = function (e) {
        //     // console.log(e.keyCode); //获取键码值
        //     // 1.2根据键盘事件的keycode键码值 去判断按下的是上下左右键 才执行一段代码
        //     // if (e.keyCode >= 37 && e.keyCode <= 40) {
        //         // console.log(e.key);
        //         // 1.3先获取img现在的位置 再进行移动
        //         // var obj = img.getBoundingClientRect();
        //         // console.log(obj);
        //         // 1.4通过结构赋值 获取img标签left与top的值
        //         var {x,y} = img.getBoundingClientRect();
        //         // console.log(x,y);
        //         // 1.5判断按下的具体是那个键
        //         switch (e.keyCode) {
        //             case 37:
        //                 // 左 设置left的值减小
        //                 x -= 5;
        //                 break;
        //             case 38:
        //                 // 上 设置top的值减小
        //                 y -= 5;
        //                 break;
        //             case 39:
        //                 // 右 设置left的值增加
        //                 x += 5
        //                 break;
        //             case 40:
        //                  // 下 设置top的值增加
        //                  y += 5;
        //                 break;
        //             default:
        //                 break;
        //         }
        //         // 1.6判断xy如果已经小于0 就等于0 最小值设置
        //         x = x < 0 ? 0 : x;
        //         y = y < 0 ? 0 : y;
        //         // 判断如果x的值已经大于 屏幕的宽-img标签的宽,就设置为 屏幕的宽-img标签的宽 限定最大值
        //         x = x > window.innerWidth - img.offsetWidth ? window.innerWidth - img.offsetWidth : x;
        //         y = y > window.innerHeight - img.offsetHeight ? window.innerHeight - img.offsetHeight : y;


        //         // 1.7设置img新的位置
        //         img.style.left = x + "px";
        //         img.style.top = y + "px";
        //     // }
        // }

    </script>
</body>

</html>